<template>
	<view>
		<view class="queryForm" >
			<u-form>
				<u-form-item label="警务助理:"  border-bottom="false" label-width="150" >
					<zhilin-picker v-model="jwzlPickerShow" :datalist="options.jwzls"
				    @confirm="jwzlSelect" :showSearch="true" :initSelected="initSelected" ></zhilin-picker>
					<u-input v-model="jwzlNames" @click="jwzlPickerShow=!jwzlPickerShow" :custom-style="jwzlInputStyle" :disabled="true" placeholder="请选择警务助理"/>
					<u-icon class="arrowIcon" :name="arrowName" :class="[jwzlPickerShow ? 'arrowIconRotateRight' : 'arrowIconRotateDown']"></u-icon>
				</u-form-item>
				<u-form-item label="选择日期:"  :border-bottom="false" label-width="150"  >
					<u-input v-model="date" @click="openCalendar" disabled="true" border="true"  />
				</u-form-item>
				<u-form-item label="状态"  :border-bottom="false"  label-width="170" >
					<u-radio-group v-model="param.state">
						<u-radio v-for="(item, index) in stateDic" :key="index" :name="item.value">
							{{item.label}}
						</u-radio>
					</u-radio-group>
				</u-form-item>
			</u-form>
			<view class="buttons">
				<u-button  @click="getList()" :disabled="submitBtn" type="primary">查询</u-button>
				<u-button v-if="hasAddRole()"  @click="toAddPage()" :disabled="submitBtn" type="success">添加</u-button>
			</view>
		</view>
		
		<view class="cqlist">	
			<view class="customCard" v-for="item in list" :key="item.id">
				<u-card  :title="item.jwzlMc" :sub-title-color="getState(item.state)?getState(item.state).color:'#19be6b'" 
				:sub-title="getState(item.state)?getState(item.state).label:''" :border="false" margin="15rpx 20rpx" @click="showDetail(item)">
					<view class="" slot="body">
						<view class="item">
							调解地点：{{item.tjdd}}
						</view>
						<view class="item">
							纠纷经过：{{item.jfjg}}
						</view>
						<view class="item">
							调解结果：{{item.tcjg}}
						</view>
						<view class="item" v-if="item.state === '3'">
							未通过原因：<view style="display:inline-block; color: #ff9900;">{{item.unCheckedReason}}</view>
						</view>
						<!-- <view class="item">
							照片：{{item.createTime}}
						</view> -->
					</view>
				</u-card>
			</view>
			<view>
			    <uni-calendar ref="calendar" :insert="false" :range="true" @confirm="confirm"/>
			</view>
			<u-toast ref="uToast" />
			<u-loadmore :status="status" @loadmore="loadmore" :load-text="loadText" margin-top="20" margin-bottom="20" />
		</view>
		
	</view>
</template>

<script>
	import { mapState} from 'vuex';
	import uniCalendar from '@/components/uni-calendar/uni-calendar.vue'
	import zhilinPicker from "@/components/zhilin-picker/zhilin-picker.vue"
	export default {
		components:{uniCalendar,zhilinPicker},
		computed:mapState(['user', ]),
		data(){
			return{
				jwzlPickerShow:false,
				submitBtn:false,
				arrowName:'arrow-down',
				date:this.$util.getNowD(-7)+" - "+this.$util.getNowD(),
				status: 'loadmore',
				initSelected:[],
				jwzlNames:'',
				loadText: {
					loadmore: '点击加载更多',
					loading: '努力加载中',
					nomore: '没有更多了'
				},
				param:{
					startDate:this.$util.getNowD(-7),
					endDate:this.$util.getNowD(),
					jwzls: [],
					state:'1',		//审核状态
					size: 10,
					page: 0,
				},
				list:[],
				options: {
					jwzls:[]
				},
				jwzlInputStyle:{
					marginRight:'38rpx'
				},
				stateDic:[{
					label:'所有',
					value:'',
					color:'#19be6b'
				},{
					label:'待审核',
					value:'1',
					color:'#2979ff'
				},{
					label:'已审核',
					value:'2',
					color:'#19be6b'
				},{
					label:'未通过',
					value:'3',
					color:'#ff9900'
				}]
			}
		},
		methods:{
			/* onChange(value){
				this.jwzlSelect(value);
			}, */
			toAddPage(){
				uni.navigateTo({
					url:'./mdjftj'
				})
			},
			getState(state){
				return this.stateDic.find(item => item.value === state);
			},
			jwzlSelect(value){
				if(value.length<1){
					this.param.jwzls = this.user.jwzls.map((item,index)=>{ return item.value});
					this.jwzlNames = "所有";
					return;
				}
				let ids = value.split(",");
				this.param.jwzls = [];
				this.jwzlNames = '';
				let jwzls = [];
				let list = [];
				this.param.jwzls = ids;
				if(ids!=undefined&&ids.length>0){
					for(let id of ids){
						list.push(this.options.jwzls.filter( jwzl => jwzl.value === parseInt(id))[0]);
					}
					for(let item of list){
						//this.formData.jwzls.push(JSON.stringify(item.value));
						jwzls.push(item.label);
					}
				}
				this.jwzlNames = jwzls.join(",");
			},
			getList(){
				this.submitBtn = true;
				this.status = 'loading';
				var that = this;
				if(that.param.page === 0){
					that.list = [];
					that.ImgList = [];
				}
					
				this.$http.post("/xxcj/mdjftj/list",this.param).then(res=>{
					that.submitBtn = false;
					let data = res.data.data;
					if(data&&data.length>0){
						if(that.param.page>0)
							that.list = that.list.concat(data);
						else
							that.list = data;
						this.status = 'loadmore';
					}else{
						this.param.page = this.param.page == 0 ? 0 : this.param.page - 1;
						this.status = 'nomore';
					}
				}).catch(err => {
					that.submitBtn = false;
					this.status = 'nomore';
					this.$refs.uToast.show({
						title: '请求失败！',
						type: 'error'
					}) 
				})
			},
			loadmore(){
				if(this.list.length>0&&(this.list.length%this.param.size==0)){
					this.param.page = this.param.page + 1;
					this.getList();
				}else{
					this.status = 'nomore';
				}
				
			},
			openCalendar(){
				this.$refs.calendar.open();
			},
			confirm(date){	
				if(date.range.before!=''&&date.range.after!=''){
					let res = this.$util.getDayDiff(date.range.after,date.range.before);
					if(res<0){
						this.date = date.range.after+' - '+date.range.before;
						this.param.startDate = date.range.after;
						this.param.endDate = date.range.before;
					}else{
						this.date = date.range.before+' - '+date.range.after;
						this.param.startDate = date.range.before;
						this.param.endDate = date.range.after;
					}
					
				}else{
					this.date = date.fulldate;
					this.param.startDate = date.fulldate;
					this.param.endDate = date.fulldate;
				}
			},
			showDetail(item){
				this.$u.route({
					url: '/pages/views/xxcj/mdjftj/mdjftj',
					params: {
						item: JSON.stringify(item)
					}
				})
			},
			hasAddRole(){
				return this.user.user.auths.indexOf('add')>-1;
			}
		},
		onLoad() {
			this.options.jwzls = this.user.jwzls;
			//this.initSelected = ['999'];
			this.param.jwzls = this.user.jwzls.map((item,index)=>{ return item.value});
			this.jwzlNames = "所有";
			this.getList();
		}
	}
</script>

<style scoped lang="scss">
	@import '../xxcj.css'
</style>
